<template>
  <!--  <el-dialog v-model="drawer" :close-on-click-modal="false" destroy-on-close width="55%" @close="drawerClose" title="询价">-->
  <!-- <el-form :model="formData" :rules="formRules" ref="formRef" size="small" :inline="false" label-width="100px">
    <el-form-item label="主题" prop="title">
      <el-input v-model="formData.title" placeholder="请输入询价主题" maxlength="32" clearable/>
    </el-form-item>
    <el-form-item label="供应商" prop="supplierIds">
      <el-select v-model="formData.supplierIds" clearable filterable multiple style="width: 100%">
        <el-option v-for="item in supplierList" :key="item.supplierInfoId" :value="item.supplierInfoId" :label="item.shortName"/>
      </el-select>
    </el-form-item>
    <el-form-item label="要求" prop="dataItems">
      <el-table stripe border size="small" :data="formData.dataItems" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}" class="product-table">
        <el-table-column label="产品名称" prop="name">
          <template v-slot="{row}">
            <el-select class="product-select" v-model="row.name" allow-create default-first-option clearable filterable>
              <el-option v-for="(item, index) in productList" :key="item.id" :value="item.name" :label="item.name" style="padding-right: 15px">
                <span style="float: left">{{ item.name }}</span>
                <el-button style="float: right;height: 34px" type="danger" text :icon="Delete" @click="delProductName(item, index)"/>
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="规格型号" prop="ver">
          <template v-slot="{row}">
            <el-input type="textarea" :rows="2" v-model="row.ver" maxlength="256" clearable/>
          </template>
        </el-table-column>
        <el-table-column label="数量" prop="num">
          <template v-slot="{row}">
            <el-input v-model="row.num" maxlength="16" clearable/>
          </template>
        </el-table-column>
        <el-table-column label="描述/备注" prop="remark">
          <template v-slot="{row}">
            <el-input type="textarea" :rows="2" v-model="row.remark" maxlength="256" clearable/>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template v-slot="{$index}">
            <el-button text type="danger" :icon="Delete" @click="delProduct($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" style="margin-top: 10px" :icon="Plus" @click="addProduct" size="small">添加</el-button>
    </el-form-item>
    <el-form-item label="是否公开" prop="openRes">
      <el-checkbox v-model="formData.openRes" :true-label="1" :false-label="0" size="small">公开到找资源</el-checkbox>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input v-model="formData.remark" type="textarea" :rows="3"/>
    </el-form-item>
  </el-form> -->
  <enquiry-price-form ref="form" :code="code" :supplierId="supplierId"></enquiry-price-form>
  <!--    <template #footer>-->
  <el-row justify="end">
    <el-button size="small" @click="closeMatter">关闭</el-button>
    <el-button size="small" type="primary" @click="submitData(form)">提交</el-button>
  </el-row>
  <!--    </template>-->
  <!--  </el-dialog>-->
</template>

<script>
// 询价 ENQUIRY_PRICE
import {computed, reactive, ref, toRefs} from 'vue'
// import {getSupplierSelector} from '/@/api/supplier'
// import {Plus, Delete} from '@element-plus/icons-vue'
// import {createMatterJust} from '/@/api/matter'
// import {saveProductList, getProductRecords, delProductRecord, sendEnquiryPrice} from '/@/api/supplier'
// import {ElMessage} from 'element-plus'
// import Cookies from 'js-cookie'
import EnquiryPriceForm from '/@/views/matter/components/EnquiryPriceForm.vue'

export default {
  name: 'EnquiryPrice',
  emits: ['callback', 'update:code'],
  props: {
    code: {
      type: String,
      default: ''
    },
    supplierId: {   // 供应商信息id
      type: String,
      default: null
    }
  },
  components: {
    EnquiryPriceForm
  },
  setup(props, context) {
    const form = ref()
    // const formRef = ref()
    // const {code, supplierId} = toRefs(props)
    // let drawer = computed({
    //   get: () => {
    //     let flag = code.value == 'ENQUIRY_PRICE'
    //     // if (flag) {
    //     //   resetForm()
    //     //   if (supplierId.value) {
    //     //     state.formData.supplierIds = [supplierId.value]
    //     //   }
    //     //   state.formData.executorIds.push(Cookies.get('userId'))
    //     //   // 获取供应商列表
    //     //   getSupplierSelector().then(res => state.supplierList = res.data).catch(e => console.log(e))
    //     //   // 获取供应商产品列表
    //     //   getProductRecords().then(res => state.productList = res.data).catch(e => console.log(e))
    //     // }
    //     return flag
    //   },
    //   set: val => context.emit('update:code', val ? 'ENQUIRY_PRICE' : '')
    // })

    // const state = reactive({
    //   formData: {
    //     type: 'ENQUIRY_PRICE'
    //   },
    //   formRules: {
    //     title: {required: true, message: '请输入询价主题', trigger: 'blur'}
    //   },
    //   supplierList: [],
    //   productList: []
    // })

    // 移除产品名称记录
    // const delProductName = (record, index) => {
    //   delProductRecord(record).then(res => {
    //     if (res.data) {
    //       state.productList.splice(index, 1)
    //       ElMessage.success('删除成功！')
    //     }
    //   }).catch(e => console.log(e))
    // }
    // // 移除产品
    // const delProduct = (index) => state.formData.dataItems.splice(index, 1)
    // // 添加产品
    // const addProduct = () => {
    //   if (state.formData.dataItems) {
    //     state.formData.dataItems.push({name: '', ver: '', num: '', remark: ''})
    //   } else {
    //     state.formData.dataItems = [{name: '', ver: '', num: '', remark: ''}]
    //   }
    // }
    // 提交事项
    const submitData = () => {
      form.value.submit()
      // formEl.validate(valid => {
      //   if (!valid) {
      //     return false
      //   }
      //   let params = JSON.parse(JSON.stringify(state.formData))
      //   if (params.supplierIds && params.supplierIds.length > 0) {
      //     params.supplierNames = []
      //     params.supplierIds.forEach(supplierId => {
      //       for (let i = 0; i < state.supplierList.length; i++) {
      //         let supplier = state.supplierList[i]
      //         if (supplier.supplierInfoId == supplierId) {
      //           params.supplierNames.push(supplier.shortName)
      //           break
      //         }
      //       }
      //     })
      //     params.supplierIds = params.supplierIds + ''
      //   }
      //   let productNames = []
      //   if (params.dataItems && params.dataItems.length > 0) {
      //     params.dataItems.forEach(item => productNames.push(item.name))
      //     params.dataItems = JSON.stringify(params.dataItems)
      //   }
      //   createMatterJust(params).then(res => {
      //     if (res.data) {
      //       // 提交产品列表名称记录
      //       if (productNames.length > 0) {
      //         saveProductList(productNames).catch(e => console.log(e))
      //       }
      //       if (params.supplierIds && params.supplierIds.length > 0) {
      //         sendEnquiryPrice(params).catch(e => console.log(e))
      //       }
      //       ElMessage.success('提交成功！')
      //       closeMatter()
      //     }
      //   }).catch(e => console.log(e))
      // })
    }
    const resetForm = () => {
      // state.formData = {
      //   id: null,
      //   title: '询价',
      //   content: '',
      //   supplierIds: [],    // 供应商信息id, 多选, 提交前逗号隔开
      //   dataItems: [],   // 要求 -> 产品列表
      //   openRes: 1,   // 是否公开到找资源, 0否 1是
      //   actionStartTime: null,
      //   actionEndTime: null,
      //   executorIds: [],
      //   remark: null,
      //   attach: '',
      //   attachNames: '',
      //   priority: 0,
      //   remindState: 'NONE',
      //   remindType: '',
      //   type: 'ENQUIRY_PRICE'
      // }
      form.value.reset()
    }
    const closeMatter = () => {
      resetForm()
      context.emit('update:code', '')
    }
    const drawerClose = () => {
      // 重置
      resetForm()
      context.emit('callback')
    }

    return {
      // Plus,
      // Delete,
      // drawer,
      // formRef,
      // ...toRefs(state),
      // delProduct,
      // addProduct,
      submitData,
      closeMatter,
      drawerClose,
      form
      // delProductName
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-table__header-wrapper .el-table__cell) {
  background: var(--el-color-primary-light-9);
  color: var(--next-bg-menuBar-light-1);
}

.product-table {
  border: 1px solid var(--el-table-border-color);

  :deep(thead .cell) {
    display: flex;
    align-items: center;
  }

  :deep(thead .el-icon) {
    margin-top: -2px;
  }

  .primary {
    cursor: pointer;
    color: var(--el-color-primary);
  }
}
</style>
